<template>
  <div>
    <div class="boxHead">
      <div>
        <!--面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
          <el-breadcrumb-item>宿舍维修列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-badge :value="damageUpListNoFix.length"
                  class="item">
          <el-button type="primary"
                     size="mini"
                     @click="getNofix">未完成</el-button>
        </el-badge>
        <el-button type="primary"
                   size="mini"
                   @click="getHaveBeenFixed">已完成</el-button>
      </div>
    </div>
    <el-card class="box-card">
      <!--学生列表区域-->
      <el-table :data="damageUpList"
                ref="towerRef"
                highlight-current-row>
        <el-table-column type="index"
                         :index="indexMethod"></el-table-column>
        <el-table-column label="所在楼宇"
                         prop="tower"></el-table-column>
        <el-table-column label="宿舍号"
                         prop="dorm"></el-table-column>
        <el-table-column label="学号"
                         prop="studentNumber"></el-table-column>
        <el-table-column label="姓名"
                         prop="name"></el-table-column>
        <el-table-column label="班级"
                         prop="class"></el-table-column>
        <el-table-column label="损坏物品"
                         prop="article"></el-table-column>
        <el-table-column label="描述"
                         min-width='140px'
                         prop="desc"></el-table-column>
        <el-table-column label="电话"
                         prop="tel"></el-table-column>
        <el-table-column label="上报时间"
                         min-width='70px'
                         prop="time"></el-table-column>
        <el-table-column label="完成时间"
                         min-width='70px'
                         prop="finishTime"></el-table-column>
        <el-table-column label="操作"
                         min-width='140px'>
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isSolve"
                       active-text="已完成"
                       inactive-text="未完成"
                       ref="swichRef"
                       @change="getSwitchCurRow(scope.row._id,scope.row.isSolve,scope.row.tower,scope.row)"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="dataList.pagenum"
                     :page-sizes="[1, 3, 5, 7]"
                     :page-size="dataList.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <!--未完成dialog-->
    <el-dialog :title="noFixTotal===0?'暂无未处理':'还剩 '+noFixTotal+' 个未处理'"
               :visible.sync="dialogVisible1"
               width="90%">
      <el-table :data="damageUpListNoFix"
                ref="towerRef"
                highlight-current-row>
        <el-table-column type="index"
                         :index="indexMethod"></el-table-column>
        <el-table-column label="所在楼宇"
                         prop="tower"></el-table-column>
        <el-table-column label="宿舍号"
                         prop="dorm"></el-table-column>
        <el-table-column label="学号"
                         prop="studentNumber"></el-table-column>
        <el-table-column label="姓名"
                         prop="name"></el-table-column>
        <el-table-column label="班级"
                         prop="class"></el-table-column>
        <el-table-column label="损坏物品"
                         prop="article"></el-table-column>
        <el-table-column label="描述"
                         min-width='140px'
                         prop="desc"></el-table-column>
        <el-table-column label="电话"
                         prop="tel"></el-table-column>
        <el-table-column label="上报时间"
                         prop="time"></el-table-column>
        <el-table-column label="完成时间"
                         prop="finishTime"></el-table-column>
        <el-table-column label="操作"
                         min-width='140px'>
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isSolve"
                       active-text="已完成"
                       inactive-text="未完成"
                       @change="getSwitchCurRow(scope.row._id,scope.row.isSolve,scope.row.tower,scope.row)"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary"
                   @click="getNewdata">确 定</el-button>
      </span>
    </el-dialog>
    <!--已完成dialog-->
    <el-dialog :title="finshTotal===0?'暂无完成维修':'已维修 '+finshTotal+' 个处理'"
               :visible.sync="dialogVisible2"
               width="90%">
      <el-table :data="damageUpListHaveBeenFixed"
                ref="towerRef"
                highlight-current-row>
        <el-table-column type="index"
                         :index="indexMethod"></el-table-column>
        <el-table-column label="所在楼宇"
                         prop="tower"></el-table-column>
        <el-table-column label="宿舍号"
                         prop="dorm"></el-table-column>
        <el-table-column label="学号"
                         prop="studentNumber"></el-table-column>
        <el-table-column label="姓名"
                         prop="name"></el-table-column>
        <el-table-column label="班级"
                         prop="class"></el-table-column>
        <el-table-column label="损坏物品"
                         prop="article"></el-table-column>
        <el-table-column label="描述"
                         min-width='140px'
                         prop="desc"></el-table-column>
        <el-table-column label="电话"
                         prop="tel"></el-table-column>
        <el-table-column label="上报时间"
                         prop="time"></el-table-column>
        <el-table-column label="完成时间"
                         prop="finishTime"></el-table-column>
        <el-table-column label="操作"
                         min-width='140px'>
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isSolve"
                       active-text="已完成"
                       inactive-text="未完成"
                       @change="getSwitchCurRow(scope.row._id,scope.row.isSolve,scope.row.tower,scope.row)"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--上传费用的dialog-->
    <el-dialog title="上传已维修费用报表"
               :visible.sync="dialogCostForm"
               width="50%">
      <!--Diage内容主体区域-->
      <el-form ref="costForm"
               :model="costForm"
               :rules="rule"
               label-width="80px">
        <el-form-item label="楼宇"
                      prop="tower">
          <el-input v-model="costForm.tower"></el-input>
        </el-form-item>
        <el-form-item label="宿舍号"
                      prop="dorm">
          <el-input v-model="costForm.dorm"></el-input>
        </el-form-item>
        <el-form-item label="上报人"
                      prop="name">
          <el-input v-model="costForm.name"></el-input>
        </el-form-item>
        <el-form-item label="维修人"
                      prop="serviceman">
          <el-input v-model="costForm.serviceman"></el-input>
        </el-form-item>
        <el-form-item label="物品更换"
                      prop="repalce">
          <el-input v-model="costForm.repalce"></el-input>
        </el-form-item>
        <el-form-item label="数量"
                      prop="count">
          <el-input-number v-model="num"
                           :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="费用"
                      prop="costs">
          <el-input v-model="costForm.costs"></el-input>
        </el-form-item>
      </el-form>
      <!--内容主体底部-->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary"
                   @click="finishFixed(costForm._id,!costForm.isSolve,costForm.tower)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { formDate } from 'commonjs/formatDate.js'
import { dormDamageMixin } from 'commonjs/dormDamageMixin.js'
export default {
  name: 'DormDamageUp',
  data () {
    return {
      // 未完成dialog的开关
      dialogVisible1: false,
      // 已完成dialog的开关
      dialogVisible2: false,
      damageUpList: [],
      damageUpListNoFix: [],
      damageUpListHaveBeenFixed: [],
      // 分页
      dataList: {
        pagenum: 1,
        pagesize: 7
      },
      total: 0,
      noFixTotal: 0,
      finshTotal: 0,
      // dialog
      dialogCostForm: false,
      // 表单规则
      rule: {
        serviceman: [
          { required: true, message: '请输入维修员姓名', trigger: 'blur' }
        ]
      },
      costForm: {},
      num: 0,
      switchMark: false
    }
  },
  created () {
    this.getDamagerUpList()
    this.getNofix()
  },
  methods: {
    // 当前页显示几天数条
    handleSizeChange (size) {
      this.dataList.pagesize = size
      const towerItem = this.$refs.towerRef.data[0].tower
      this.getDamagerUpList(undefined, null, towerItem)
    },
    // 下一页或上一页
    handleCurrentChange (currentPage) {
      this.dataList.pagenum = currentPage
      const towerItem = this.$refs.towerRef.data[0].tower
      // console.log(this.$refs.towerRef)
      this.getDamagerUpList(undefined, null, towerItem)
    },
    // 请求未维修的损坏列表
    async getNofix () {
      // console.log(this.damageUpListNoFix)
      if (this.damageUpListNoFix.length !== 0) {
        this.dialogVisible1 = true
      } else {
        this.dialogVisible1 = false
      }
      this.damageUpListNoFix = []
      const { data: res } = await this.$axios.get('/damage/noFix', {
        params: {
          tower: window.localStorage.getItem('tower')
        }
      })
      // console.log('未维修', res)
      if (res.meta.code === 200) {
        res.noFixList.forEach(valid => {
          // console.log(valid.time)
          valid.time = formDate(valid.time)
          valid.finishTime = formDate(valid.finishTime)
          if (valid.finishTime === '1970-01-01 08:00:00') {
            valid.finishTime = ''
            this.damageUpListNoFix.push(valid)
          } else {
            this.damageUpListNoFix.push(valid)
          }
        })
        this.noFixTotal = res.noFinshTotal
      } else {
        this.$message.error(res.meta.msg)
      }
    },
    // 请求已维修的损坏列表
    async getHaveBeenFixed () {
      this.dialogVisible2 = true
      this.damageUpListHaveBeenFixed = []
      const { data: res } = await this.$axios.get('/damage/haveBeenFixed', {
        params: {
          tower: window.localStorage.getItem('tower')
        }
      })
      // console.log('已维修', res)
      if (res.meta.code === 200) {
        this.damageUpListHaveBeenFixed = res.haveBeenFixed
        this.finshTotal = res.finshTotal
      } else {
        this.$message.error(res.meta.msg)
      }
    },
    // 点击确定后重新获取数据
    getNewdata () {
      this.dialogVisible1 = false
      location.reload()
    },
    // 点击Switch时触发的函数，就是选择为未完成时触发的
    async finishFixedclick (id, isSolve, tower, row) {
      // console.log(id, isSolve, tower, row)
      const { data: res } = await this.$axios.get('/damage/HBFixed', {
        params: {
          _id: id,
          tower,
          isSolve: isSolve,
          finishTime: new Date().getTime()
        }
      })
      // console.log(res)
      if (res.code === 0) {
        this.damageUpList = []
        res.damageUpList.forEach(valid => {
          // console.log(valid.time)
          valid.time = formDate(valid.time)
          valid.finishTime = formDate(valid.finishTime)
          if (valid.finishTime === '1970-01-01 08:00:00') {
            valid.finishTime = ''
            this.damageUpList.push(valid)
          } else {
            this.damageUpList.push(valid)
          }
        })
        // console.log(this.damageUpList)
      } else {
        this.$message.error(res.msg)
      }
      this.fixedCostUp()
      this.dialogCostForm = false
      this.costForm = {}
    }
  },
  mixins: [dormDamageMixin]
}

</script>
<style lang='less' scoped>
.boxHead {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  text-align: center;
  .el-breadcrumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .item {
    margin-right: 20px;
  }
}
</style>
